<template>
  <div class="order-container">
    <!-- 背景装饰元素 -->
    <div class="decoration-circle decoration-circle-1"></div>
    <div class="decoration-circle decoration-circle-2"></div>
    <div class="decoration-circle decoration-circle-3"></div>
    <!-- 搜索区域 -->
    <transition name="fade" appear>
      <el-card class="search-card" shadow="hover">
        <el-form :inline="true" class="form">
          <el-form-item label="用户ID:">
            <el-input
              placeholder="请输入用户ID"
              v-model="keyword"
              clearable
              prefix-icon="Search"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="default"
              :disabled="!keyword"
              @click="search"
              icon="Search"
            >
              搜索
            </el-button>
            <el-button
              type="info"
              size="default"
              @click="reset"
              icon="RefreshRight"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </transition>

    <!-- 表格区域 -->
    <transition name="slide-fade" appear>
      <el-card class="table-card" shadow="hover">
        <div class="button-group">
          <el-button
            type="primary"
            size="default"
            @click="getHasUser"
            icon="Refresh"
          >
            刷新数据
          </el-button>
        </div>

        <el-table
          :data="allOrderList"
          border
          stripe
          highlight-current-row
          style="margin-top: 20px"
          class="order-table"
          :row-class-name="tableRowClassName"
        >
          <el-table-column align="center" prop="oid" label="订单号" width="70">
            <template #default="{ row }">
              <span class="order-id">{{ row.oid }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="uid"
            label="用户ID"
            width="70"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="uname"
            label="用户名"
            width="120"
          >
            <template #default="{ row }">
              <el-tag size="small" effect="plain">{{ row.uname }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sum" label="票数" width="60">
            <template #default="{ row }">
              <el-badge :value="row.sum" type="primary" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="amount" label="总价" width="70">
            <template #default="{ row }">
              <span class="price">¥{{ row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="mname" label="电影名">
            <template #default="{ row }">
              <el-tooltip
                :content="row.mname"
                placement="top"
                :show-after="500"
              >
                <span class="movie-name">{{ row.mname }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="director"
            label="导演"
          ></el-table-column>
          <el-table-column align="center" prop="type" label="类型">
            <template #default="{ row }">
              <el-tag size="small" type="success">{{ row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="message" label="座位号">
            <template #default="{ row }">
              <el-tooltip :content="getSeat(row.message)" placement="top">
                <el-tag size="small" type="warning">
                  {{ getSeat(row.message) }}
                </el-tag>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="sname"
            label="场次"
          ></el-table-column>
          <el-table-column align="center" label="场次时间">
            <template #default="{ row }">
              <div class="time-info">
                <el-icon><Calendar /></el-icon>
                <span>{{ formatTime(row.stime) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="购买时间">
            <template #default="{ row }">
              <div class="time-info">
                <el-icon><Clock /></el-icon>
                <span>{{ formatTime(row.buyTime) }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5, 7, 9, 11]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @current-change="getHasUser"
            @size-change="handler"
            class="pagination"
          />
        </div>
      </el-card>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqOrderList } from '@/api/order'
import qs from 'qs'
import { formatTime, getSeat } from '@/util/time.ts'
import useLayOutSettingStore from '@/store/modules/setting.ts'
import {
  Calendar,
  Clock,
  Search,
  RefreshRight,
  Refresh,
} from '@element-plus/icons-vue'

let settingStore = useLayOutSettingStore()
//默认页码
let pageNo = ref<number>(1)
//一页展示几条数据
let pageSize = ref<number>(11)
//用户总个数
let total = ref<number>(0)
let keyword = ref(0)
let allOrderList = ref([])

onMounted(() => {
  getHasUser()
})

const handler = () => {
  getHasUser()
}

const getHasUser = async (pager = 1) => {
  //收集当前页码
  let data = qs.stringify({
    name: keyword.value,
    page: pageNo.value,
    pageSize: pageSize.value,
  })
  pageNo.value = pager
  let result: any = await reqOrderList(data)
  if (result.code == 1) {
    total.value = result.data.total
    allOrderList.value = result.data.records
  }
}

const search = () => {
  //根据关键字获取相应的用户数据
  getHasUser()
  //清空关键字
  keyword.value = 0
}

const reset = () => {
  settingStore.refresh = !settingStore.refresh
}

// 为表格行添加不同的类名，实现彩虹效果
const tableRowClassName = ({ rowIndex }) => {
  const colorClasses = [
    'row-primary',
    'row-success',
    'row-warning',
    'row-danger',
    'row-info',
  ]
  return colorClasses[rowIndex % colorClasses.length]
}
</script>

<style scoped lang="scss">
.order-container {
  padding: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(99, 102, 241, 0.1) 0%,
      rgba(99, 102, 241, 0) 70%
    );
    z-index: 0;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(239, 68, 68, 0.08) 0%,
      rgba(239, 68, 68, 0) 70%
    );
    z-index: 0;
  }

  .decoration-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
  }

  .decoration-circle-1 {
    top: 20%;
    left: 10%;
    width: 150px;
    height: 150px;
    background: radial-gradient(
      circle,
      rgba(16, 185, 129, 0.05) 0%,
      rgba(16, 185, 129, 0) 70%
    );
  }

  .decoration-circle-2 {
    top: 40%;
    right: 15%;
    width: 180px;
    height: 180px;
    background: radial-gradient(
      circle,
      rgba(245, 158, 11, 0.05) 0%,
      rgba(245, 158, 11, 0) 70%
    );
  }

  .decoration-circle-3 {
    bottom: 15%;
    left: 20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(
      circle,
      rgba(14, 165, 233, 0.05) 0%,
      rgba(14, 165, 233, 0) 70%
    );
  }

  .search-card {
    margin-bottom: 20px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(to right, #ffffff, #f9f9ff);
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(to bottom, #42b983, #2f9768);
    }

    &:hover {
      transform: translateY(-5px);
      box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.1),
        0 8px 15px rgba(0, 0, 0, 0.05);
    }
  }

  .table-card {
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(to right, #ffffff, #f9f9ff);
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(to bottom, #6366f1, #4f46e5);
    }

    &:hover {
      transform: translateY(-5px);
      box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.1),
        0 8px 15px rgba(0, 0, 0, 0.05);
    }
  }

  .form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    :deep(.el-input__wrapper) {
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;

      &:focus-within {
        box-shadow: 0 3px 15px rgba(66, 185, 131, 0.2);
      }
    }

    :deep(.el-button) {
      transition: all 0.3s;

      &.el-button--primary {
        background: linear-gradient(to right, #42b983, #2f9768);
        border: none;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(66, 185, 131, 0.3);
        }
      }

      &.el-button--info {
        background: linear-gradient(to right, #64748b, #475569);
        border: none;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(100, 116, 139, 0.3);
        }
      }
    }
  }

  .button-group {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;

    :deep(.el-button) {
      background: linear-gradient(to right, #6366f1, #4f46e5);
      border: none;
      border-radius: 8px;
      padding: 12px 24px;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: 0.5s;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);

        &::before {
          left: 100%;
        }
      }

      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
  }

  .order-table {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      background: linear-gradient(
        45deg,
        #6366f1,
        #3b82f6,
        #10b981,
        #f59e0b,
        #ef4444
      );
      z-index: -1;
      border-radius: 15px;
      filter: blur(8px);
      opacity: 0.15;
      transition: all 0.6s;
    }

    &:hover::before {
      opacity: 0.25;
      filter: blur(10px);
    }

    :deep(.el-table__header) {
      background: linear-gradient(to right, #f1f5f9, #e2e8f0);

      th {
        background: transparent;
        font-weight: 600;
        color: #334155;
        padding: 16px 0;
      }
    }

    :deep(.el-table__row) {
      transition: all 0.3s;

      &:hover {
        background-color: #f8fafc !important;
        transform: scale(1.005);
      }

      &.current-row {
        background-color: rgba(99, 102, 241, 0.05) !important;
      }

      // 彩虹行样式
      &.row-primary {
        background-color: rgba(99, 102, 241, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(99, 102, 241, 0.1);
        }
      }

      &.row-success {
        background-color: rgba(16, 185, 129, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(16, 185, 129, 0.1);
        }
      }

      &.row-warning {
        background-color: rgba(245, 158, 11, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(245, 158, 11, 0.1);
        }
      }

      &.row-danger {
        background-color: rgba(239, 68, 68, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(239, 68, 68, 0.1);
        }
      }

      &.row-info {
        background-color: rgba(14, 165, 233, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(14, 165, 233, 0.1);
        }
      }
    }

    .order-id {
      font-weight: bold;
      color: #409eff;
    }

    .price {
      color: #f56c6c;
      font-weight: 600;
    }

    .movie-name {
      font-weight: 500;
      color: #303133;
    }

    .time-info {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #606266;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        color: #3b82f6;
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 25px;

    .pagination {
      padding: 10px 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

      :deep(.el-pagination__jump),
      :deep(.el-pagination__sizes) {
        margin-left: 15px;
      }

      :deep(.el-pager li) {
        background: transparent;
        transition: all 0.3s;

        &:not(.is-disabled):hover {
          color: #6366f1;
        }

        &.is-active {
          background: linear-gradient(to right, #6366f1, #4f46e5);
          color: white;
          font-weight: bold;
        }
      }

      :deep(.btn-prev),
      :deep(.btn-next) {
        background: transparent;

        &:hover {
          color: #6366f1;
        }
      }
    }
  }
}

// 动画效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>
